<template>
<section class="export-modelbox">
    <el-dialog :title="'导入文件'" width="40%" :visible.sync="csvloadTableVisible" :modal-append-to-body="false">
        <el-row v-loading="loading">
            <el-col :span="24">
                <el-tag style="width:100%;margin-bottom:20px;" type="warning">{{config.desinfo}}
                    <slot name="export"></slot>
                </el-tag>
            </el-col>
            <el-col :span="24">
                <el-upload
ref="uploadcsv"
class="upload-demo input-with-select fin-min-width"
:action="pathUrl"
:on-remove="certRemove"
:before-remove="certbeforeRemove"
:on-change="certchange"
:multiple="multiple"
:accept="accept"
:auto-upload="false"
:limit="1"
:on-success="certsuccess"
:on-exceed="certhandleExceed"
:file-list=" createFileList">
                    <el-input v-model="title" placeholder="" readonly size="small" class="upload-file"></el-input>
                    <el-button style="display: inline-block;border-radius: 0 4px 4px 0;margin-left: -5px;" size="small" type="success" plain>点击上传</el-button>
                </el-upload>
                <!-- <div>
            <el-button
              type="primary"
              style="margin-left:20px;"
              @click="importfxxData"
            >立即导入</el-button>
          </div> -->
            </el-col>
            <el-col :span="24" class="flex-row flex-align-c flex-justify-c">
                <el-button size="small" type="primary" @click="importfxxData">确定</el-button>
                <el-button size="small" @click="csvloadTableVisible = false">取消</el-button>
            </el-col>
        </el-row>
    </el-dialog>
</section>
</template>

<script>
import defaultConfig from './utils/config'
export default {
  data() {
    return {
      loading: false,
      createFileList: [],
      multiple: false,
      title: '',
      accept: '.csv',
      uplistIsEmpty: false,
      csvloadTableVisible: false
    }
  },
  mixins: [defaultConfig.mixins],
  props: {
    changeEvt: Function,
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }
  },
  watch: {

  },
  computed: {
    pathUrl() {
      return '/uploadFile'
    }
  },
  mounted() {

  },
  methods: {
    toggle() {
      this.createFileList = []
      this.csvloadTableVisible = !this.csvloadTableVisible
    },
    certRemove(files, fileList) {
      this.createFileList = []
    },
    certbeforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    certhandleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    },
    certchange(files, fileList) {
      console.log(files)
      this.createFileList.push(files)
      this.uplistIsEmpty = fileList.length > 0
    },
    certsuccess(files, fileList) {
      console.log(files, 'certsuccess')
      const issuccess = files.errno
      if (issuccess === 0) {
        this.dialogTableVisible = false
        this.clearFiles()
        this.loading = true
        this.getTabChangeLitsData('order')
      } else {
        this.$message.error('上传失败，请重试')
      }
    },
    importfxxData() {
      const isEmpty = this.uplistIsEmpty
      const config = this.updateConfig
      this.$confirm(
        `${
          !isEmpty
            ? config.message.empty
            : config.message.noEmpty
        }`,
        '提示信息',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          this.loading = true
          console.log(this.createFileList)
          const requestApi = this.config.api
          const custormParams = this.config.params
          if (requestApi) {
            const formData = new FormData()
            // 从选中的file对象里拿到数据
            this.createFileList.map((item, index) => {
              formData.append(
                `file`,
                item.raw
              )
            })

            if (custormParams) {
              const paramsKeys = Object.keys(custormParams)
              if (paramsKeys.length > 0) {
                paramsKeys.map(name => {
                  formData.append(
                    `${name}`,
                    `${custormParams[`${name}`]}`
                  )
                  // console.log(`${name}`, `${custormParams[`${name}`]}`)
                })
              }
            }

            requestApi(formData).then(files => {
              const { data: { code, msg }} = files
              if (code === 1) {
                this.$message.success('导入成功')
                this.output()
                this.loading = false
                this.toggle()
              } else {
                this.loading = false
                this.$message.error(msg)
              }
            }).catch(() => {
              this.loading = false
              this.toggle()
            })
          } else {
            console.error('api is not defined')
          }
        })
        .catch(() => {
          this.$message({
            type: 'warning',
            message: '已取消'
          })
        })
    },
    output() {
      if (
        Object.prototype.toString.call(this.changeEvt) === '[object Function]'
      ) {
        this.changeEvt()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.export-modelbox {
    .upload-demo {
        white-space: nowrap;
        padding: 10px 0 30px;
    }

    /deep/ .upload-file {
        border-radius: 4px 0 0 4px;

        .el-input__inner {
            border-radius: 4px 0 0 4px;
        }
    }
}
</style>
